<template>
  <div class="student-info">
    <el-form
      class="student-info-form"
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="110px"
      size="small"
      inline
    >
      <Panel title="注册信息" icon="zhucechenggong">
        <el-row class="info-row">
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('student.studentCode') }}</span>
            <span class="info-text">{{ userInfo.studentCode }}</span>
          </el-col>
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('field.registerTime') }}</span>
            <span class="info-text">{{ userInfo.registerTime }}</span>
          </el-col>
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('field.lastLoginTime') }}</span>
            <span class="info-text">{{ userInfo.lastLoginTime }}</span>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="8">
            <span class="info-label">{{
              $tLabel('field.registerAccount')
            }}</span>
            <span class="info-text">{{ userInfo.account }}</span>
          </el-col>
        </el-row>
      </Panel>
      <Panel title="基本信息" icon="jibenxinxi">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="name" :label="$t('student.name')">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="sex" :label="$t('student.sex')">
              <el-select v-model="formData.gender" :placeholder="$tSelect()">
                <el-option
                  v-for="item in $enumList('GENDER')"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="birthday" :label="$t('student.birthday')">
              <el-date-picker v-model="formData.birthday" type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="mobile" :label="$t('student.mobile')">
              <el-input
                v-model="formData.mobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="school" :label="$t('student.school')">
              <el-input
                v-model="formData.school"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="studentNumber"
              :label="$t('student.studentNumber')"
            >
              <el-input
                v-model="formData.studentNumber"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              prop="urgentContactName"
              :label="$t('student.urgentContactName')"
            >
              <el-input
                v-model="formData.urgentContactName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="major" :label="$t('student.major')">
              <el-input
                v-model="formData.major"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="academicSession"
              :label="$t('student.academicSession')"
            >
              <el-input
                v-model="formData.academicSession"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              prop="urgentContactMobile"
              :label="$t('student.urgentContactMobile')"
            >
              <el-input
                v-model="formData.urgentContactMobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="degree" :label="$t('student.degree')">
              <el-select v-model="formData.degree" :placeholder="$tSelect()">
                <el-option
                  v-for="item in dictData['min_edu']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="workYears" :label="$t('student.workYears')">
              <el-input-number
                v-model="formData.workYears"
                :placeholder="$tInput()"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="app-btns">
          <el-button
            size="small"
            type="primary"
            @click="submitForm"
            :loading="submiting"
            >保存</el-button
          >
        </div>
      </Panel>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from 'mixins'
import { Panel } from 'components'
import { updateInfo } from 'services/student/student'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'StudentInfo',
  mixins: [dictMixin],
  dicts: ['min_edu'],
  components: { Panel },
  data() {
    return {
      formData: {},
      submiting: false
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        name: this.$rule('student.name', {
          required: true
        })
      }
    }
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo'
    }),
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const { data } = await updateInfo(this.formData)
        this.setUserInfo(data)
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.student-info {
  .panel {
    margin-top: 20px;
  }
  .student-info-form {
    padding: 20px 0;
    .el-form-item {
      display: flex;
    }
    .el-form-item__content {
      flex: 1;
      width: 100% !important;
    }
    .el-input {
      width: 100%;
    }
  }
}
</style>
